<template>
  <div class="todoapp">
    <todo-header />
    <todo-main :list="list" @del="del"/>
    <todo-footer />
  </div>
</template>

<script>
// 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ]
    }
  },
  methods: {
    del (id) {
      // 根据id删除，所谓删除就是筛选出除了这s个id以外的别的数据
      this.list = this.list.filter(v => v.id !== id)
    }
  }
}
</script>

<style></style>
